<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">
	.date-picker {
		width: 120px;
	}
</style>
<div class="page-header">
	<h1><?=$schoolInfo['school_name']?> 收费项管理</h1>
</div>

<div class="col-xs-12">
	<a href="#modal-charge" class="btn btn-primary show-modal" data-toggle="modal" data-id="" data-class="">
		<i class="ace-icon fa fa-table"></i> 添加收费项
	</a>
	<table id="dynamic-table" class="table table-striped table-bordered table-hover" style="margin-top:10px">
		<thead>
			<tr>
				<th>收费名称</th>
				<th>支付价格（元）</th>
				<th>收费项有效时间</th>
				<th>激活有效期方式</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>

<!-- 收费项弹窗 -->
<div id="modal-charge" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button>
					<span id="modal-name"></span>
				</div>
			</div>
			<div class="modal-body no-padding">
				<div class="row">
					<div class="col-xs-12">
						<form class="form-horizontal mt10" id="charge-form">
							<input type="hidden" name="id" />
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">收费项名称：</label>
								<div class="col-sm-6">
									<input type="text" class="form-control" name="name" placeholder="请填写收费项名称" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">收费价格：</label>
								<div class="col-sm-6">
									<input type="number" class="form-control" name="price" placeholder="请填写收费价格" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">收费长期有效：</label>
								<div class="col-sm-6">
									<select class="form-control" name="effect_mode">
										<option value="1">是</option>
										<option value="2">否</option>
									</select>
								</div>
							</div>
							<div class="form-group div-effect-time">
								<label class="col-sm-3 control-label no-padding-right">收费有效时间：</label>
								<div class="col-sm-6">
									<input class="date-picker" type="text" id="date-picker" name="effect_time_begin" placeholder="开始日期"  />
									&nbsp;&nbsp;-&nbsp;&nbsp;
									<input class="date-picker" type="text" id="date-picker2" name="effect_time_end" placeholder="结束日期" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">激活有效期方式：</label>
								<div class="col-sm-6">
									<select class="form-control" name="active_mode">
										<option value="1">按月份</option>
										<option value="2">按截止时间</option>
									</select>
								</div>
							</div>
							<div class="form-group div-active-month">
								<label class="col-sm-3 control-label no-padding-right">激活月份：</label>
								<div class="col-sm-6">
									<input class="date-picker" type="number" name="active_month" />
								</div>
							</div>
							<div class="form-group div-active-time">
								<label class="col-sm-3 control-label no-padding-right">激活截止时间：</label>
								<div class="col-sm-6">
									<input class="date-picker" type="text" id="date-picker3" name="active_time" placeholder="截止日期" />
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer no-margin-top" >
				<a href="javascript:;" class="btn btn-sm btn-primary" id="save-charge">
					<i class="ace-icon fa fa-check"></i> 保存
				</a>
			</div>
		</div>
	</div>
</div>

<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script type="text/javascript">
	var table = "";

	$(function(){
		var form = $("#charge-form");
		// 显示弹窗
		$("body").on("click", ".show-modal", function(){
			var id = $(this).data("id");
			if(id) {
				var name = $(this).data("name");
				var price = $(this).data("price");
				var effectMode = $(this).data("effectmode");
				var effectTimeBegin = $(this).data("effecttimebegin");
				var effectTimeEnd = $(this).data("effecttimeend");
				var activeMode = $(this).data("activemode");
				var activeTime = $(this).data("activetime");
				var activeMonth = $(this).data("activemonth");
				form.find("[name=id]").val(id);
				form.find("[name=name]").val(name);
				form.find("[name=price]").val(price);
				form.find("[name=effect_mode]").val(effectMode);
				form.find("[name=effect_time_begin]").val(effectTimeBegin);
				form.find("[name=effect_time_end]").val(effectTimeEnd);
				form.find("[name=active_mode]").val(activeMode);
				form.find("[name=active_time]").val(activeTime);
				form.find("[name=active_month]").val(activeMonth);
				if(effectMode == 1) {
					$('.div-effect-time').hide();
				} else {
					$('.div-effect-time').show();
				}
				if(activeMode == 1) {
					$('.div-active-time').hide();
					$('.div-active-month').show();
				} else {
					$('.div-active-month').hide();
					$('.div-active-time').show();
				}
			} else {
				form.find("[name=id]").val(0);
				form.find("[name=name]").val('');
				form.find("[name=price]").val('');
				form.find("[name=effect_mode]").val(1);
				form.find("[name=effect_time_begin]").val('');
				form.find("[name=effect_time_end]").val('');
				form.find("[name=active_mode]").val(1);
				form.find("[name=active_time]").val('');
				form.find("[name=active_month]").val(1);
				form.find(".div-effect-time").hide();
				form.find(".div-active-time").hide();
				
			}
			// 修改弹窗名称
			$("#modal-name").text(id ? '修改收费项' : '新增收费项');
		})
		// 监听表单变化
		$("body").on("change", "[name=effect_mode]", function(){
			if($(this).val() == 1) {
				$('.div-effect-time').hide();
			} else {
				$('.div-effect-time').show();
			}
		});
		$("body").on("change", "[name=active_mode]", function(){
			if($(this).val() == 1) {
				$('.div-active-time').hide();
				$('.div-active-month').show();
			} else {
				$('.div-active-time').show ();
				$('.div-active-month').hide();
			}
		});

		// 提交表单
		$("#save-charge").click(function(){
			form.submit();
		})

		var submitUrl = "<?=admin_url('admin/save_charge_action')?>/<?=$schoolInfo['id']?>";
		form_submit(form, submitUrl, function(res) {
			tips_alert(res.msg, res.success, function(){
				if(res.success) window.location.reload();
			});
		})

		// 班级表格
		table = $('#dynamic-table').dt({
			"ajaxUrl": '<?=admin_url('admin/get_charge_list')?>/<?=$schoolInfo['id']?>',
			"columns": [
				{"data": "name"},
				{"data": "price"},
				{"data": "effect"},
				{"data": "active"},
	            {"data": function(ret){
	            	var action = "";
					action += '<a class="show-modal green" href="#modal-charge" data-toggle="modal" data-id="'+ ret.id + '" data-name="'+ ret.name + '" data-price="'+ ret.price + 
					'" data-effectmode="'+ ret.effect_mode + '" data-effecttimebegin="'+ ret.effect_time_begin + '" data-effecttimeend="'+ ret.effect_time_end + 
					'" data-activemode="'+ ret.active_mode + '" data-activetime="'+ ret.active_time + '" data-activemonth="'+ ret.active_month + '"><i class="fa fa-edit"></i> 修改</a>';
	            	action += '<a href="javascript:;" class="delete-charge red ml10" data-id="'+ ret.id +'"><i class="fa fa-times"></i> 删除</a>';
	                return action;
	            }},
			]
		});

		// 删除
		$("body").on("click", ".delete-charge", function(){
			var id = $(this).data("id");
			layer.confirm('确定删除该收费项吗？', function(index){
				layer.close(index);

				// 提交数据
				var actionUrl = "<?=admin_url('admin/delete_charge_action')?>";
				var actionData = {"id": id};
				ajax_get(actionUrl, actionData, function(){
					table.draw(false);
				});
			});
		});
		// 日期选择器
		$("#date-picker").datetimepicker({
			format: 'MM-DD',
			// minDate: "<?= date('Y-m-d') ?>"
		});
		// 日期选择器
		$("#date-picker2").datetimepicker({
			format: 'MM-DD',
			// minDate: "<?= date('Y-m-d') ?>"
		});
		// 日期选择器
		$('#date-picker3').datetimepicker({
			format: 'YYYY-MM-DD',
			// minDate: "<?= date('Y-m-d') ?>"
		});
	})
</script>